<script setup>
  import {ref,computed,watch} from 'vue'
  import {onLoad} from '@dcloudio/uni-app'

  const goodDetailData = ref({})
  const bannerItemList = ref(['','','']) 
  // const bannerItemList = computed(() =>  goodDetailData.value.bannerImgs || [] )
  const goodName = computed(() => goodDetailData.value.name || '')
  const description = computed(() => goodDetailData.value.description || '')
  const price = computed(() => goodDetailData.value.price)

  const buyNumber = ref(1)
  const totalPrice = computed(() => price.value * buyNumber.value)

  const buyOption = ref([])

  // 最终还是决定从服务器进行查询
  async function getDetailData(goodId){
    return {
      // id:'',
      name:'商品名称很牛逼',
      description:'0糖，很牛逼',
      bannerImgs:[ '','' ]
    }
  }
  async function getMakeOption(){
    // for(let i = 0;i < 3; i++){
    //   buyOption.value.push({

    //   })
    // }
    return [
        {
          name:'杯形',
          value:null,
          defaultValue:0,
          option:[
            {label:'大杯',id:0}
          ]
        },
        {
          name:'温度',
          value:null,
          defaultValue:0,
          option:[
            {label:'冰',id:0},
            {label:'热',id:1}
          ]
        },
        {
          name:'糖度',
          value:null,
          defaultValue:0,
          option:[
            {label:'标准甜',id:0},
            {label:'少甜',id:1},
            {label:'少少甜',id:2},
            {label:'微甜',id:3},
            {label:'不另外推荐',id:4}
          ]
        }
      ]
  }
  
  function handleOptionClick(item,option){
    item.value = option.id
  }

  onLoad(async (param) => {
    const data = JSON.parse(param.data)
    goodDetailData.value = data
    buyOption.value = await getMakeOption()
  })
</script>
<template>
  <view class="good-detail">
    <view class="good-detail-banner">
			<swiper class="t-swiper" indicator-dots autoplay circular indicator-active-color="#ffffff">
				<swiper-item class="t-swiper-item" v-for="item in bannerItemList">
          <!-- todo:动态数据 -->
					<image src="@/static/good-detail-banner-demo.png"></image>
				</swiper-item>
			</swiper>
    </view>
    <view class="good-detail-demand">
      <!-- todo:怎么动态的设置这个view的背景图片呢 -->
      <view class="good-detail-demand-title">
        <view class="demand-label">
          <text class="good-name">{{ goodName }}</text>
          <text class="description">{{ description }}</text>
        </view>
        <view class="coffee-slogn">
          <image src="@/static/c1.png"></image> 
        </view>
      </view>

      <view class="demand-detail">
        <view v-for="item in buyOption" class="make-option-item">
          <view class="option-name">{{ item.name }}</view>
          <view class="option-content">
            <view 
              v-for="option in item.option" 
              :class="{'option':true, 'option-active':item.value === option.id}"
              @click="handleOptionClick(item,option)"
            >
              {{ option.label }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="fixed-placeholder"></view>
    <view class="good-buy-action">
      <view class="info">
        <view class="info-price">
          {{ totalPrice }}
        </view>
        <view class="info-number">
          <label @click.stop="buyNumber -= 1">
            <uni-icons type="minus-filled" color="#0022AB" size="28" ></uni-icons>	
          </label>
          <text>{{ buyNumber }}</text>
          <label @click.stop="buyNumber += 1">
            <uni-icons type="plus-filled" color="#0022AB" size="28" ></uni-icons>	
          </label>
        </view>
      </view>
      <view class="operate">
        <view class="button buy-now">立即购买</view>
        <view class="button add-cart">加入购物车</view>
      </view>
    </view>
  </view>
</template>
<style lang="less" scoped>
  .good-detail {
    .good-detail-banner{
      height:400rpx;
      .t-swiper {
        height:100%;
        width: 100%;
        image {
          width:100%;
          height:100%;
        }
      }
    }

    @borderRadius:25rpx;
    .good-detail-demand {
      min-height:400rpx;
      position:relative;
      top:-@borderRadius;
      .good-detail-demand-title {
        background-color:white;
        padding:27rpx 25rpx 60rpx;
        display:flex;
        align-items: center;
        border-radius:@borderRadius @borderRadius 0 0;
        .demand-label {
          flex:1;
          display:flex;
          flex-direction: column;
          .good-name {
            font-size:40rpx;
            font-weight:bold;
          }
          .description {

          }
        }

        .coffee-slogn {
          background-color: green;
          @slognSize:60rpx;
          image {
            width:@slognSize;
            height:@slognSize;
          }
        }
      }

      .demand-detail {
        background-color: #fff;
        padding-right:20rpx;
        padding-bottom:40rpx;
        .make-option-item {
          display:flex;
          margin-bottom:20rpx;
          .option-name {
            padding-top:9rpx;
            width:100rpx;
            display:flex;
            justify-content: center;
            align-items: flex-start;
            font-size:30rpx;
            font-weight:bold;
          }
          .option-content {
            flex:1;
            display:grid;
            grid-template-columns: repeat(3,1fr);
            grid-gap:20rpx 10rpx;
            // justify-items: center;
            // align-items: center;
            .option {
              padding:10rpx 30rpx;
              background-color: #F7F7F7;
              display:flex;
              justify-content: center;
              align-items: center;
            }
            .option-active {
              background-color: #EAEEFF;
              color:#0022AB;
            }
          }

        } 
      }
    }


    @actionHeight:180rpx;
    .fixed-placeholder {
      height:@actionHeight;
      width:100%;
      background-color: #F6F6F6;
    } 
    .good-buy-action {
      position:fixed;
      bottom:0;
      width:100%;
      height:@actionHeight;
      background-color: #fff;
      border-top:1rpx solid #E2E2E2;
      .info {
        display:flex;
        justify-content: space-between;
        padding:5rpx 10rpx 0;
        .info-price {

        }
        .info-number {
          display:flex;
          align-items: center;
          text {
            margin:0 4rpx;
          }
        }
      }       

      .operate {
        display:flex;
        justify-content: center;
        align-items: center;
        @buttonHeight:40rpx;
        @padding:20rpx;
        .button {
          flex:1;
          display:flex;
          justify-content: center;
          align-items: center;
          padding:@padding;
          margin:10rpx 20rpx;
          height:@buttonHeight;
          border-radius:(@buttonHeight + 2 * @padding) / 2;
          font-weight:bold;
        }
        .buy-now {
          border:1rpx solid #987024;
          color:#987024;
        }
        .add-cart {
          border:1rpx solid #0022AB;
          background-color: #0022AB;
          color:white;
        }

      }
    }
  }
</style>